<template>
  <Modal v-model="modal" :title="title" fullscreen>
    <div class="supplersign-modal scroll">
      <Form :label-width="80">
        <Row class="pr">
          <Col span="20">
            <FormItem label="单位名称">
              <Input placeholder="请输入单位名称" v-model="sourceBtypeName" :maxlength="60"/>
            </FormItem>
          </Col>
          <Col span="4">
            <Button type="primary" class="ml" @click="getData">查询</Button>
          </Col>
        </Row>
      </Form>
      <div>
        <Table
          stripe
          :columns="list.columns1"
          :data="list.data1"
          @on-selection-change="onSelectionChange"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </div>
      <div>
        <p>经销商绑定列表</p>
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns2"
          :data="list.data2"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
      </div>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">绑定</Button>
    </div>
</Modal>
</template>
<script>
import list from './BindModelListData'
export default {
  data() {
    return {
      id: null,
      modal: false,
      title: '绑定ERP经销商',
      options: {
        tableHeight: 200
      },
      list,
      selectedItems: [],
      row: {},
      sourceBtypeName: '',
    };
  },
  mounted() {
    this.$bus.$on('unbindDw', this.unbindDw) // 单位解绑
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    unbindDw(row) {
      let params = {
        distributorId: row.distributorId,
        ownerId: row.ownerId,
        sourceBtypeId: row.sourceBtypeId
      }
      this.$jsonPost('/distributor/contract/unbind', params).then(res =>{
        this.$Message.success('解绑成功')
        this.getData()
        this.getDataById(this.row.distributorId)
      })
    },
    onPageChange(v) {
      this.list.currentPage = v
      this.getData()
    },
    onPageSizeChange(v) {
      this.list.pageSize = v
      this.getData()
    },
    getData() {
      this.list.status = "loading";
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        sourceBtypeName: this.sourceBtypeName
      };
      this.$ajaxGet("/distributor/contract/findNoBindList", param).then(data => {
        this.list.data1 = [];
        this.list.totalItem = Number(data.total);
        this.list.data1 = (data.records || [])
        this.list.status = "pass";
      })
      .catch((err) => {
        console.warn(err)
        this.list.status = "error";
      });
    },
    getDataById(id) {
      this.list.status = "loading";
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        distributorId: id
      };
      this.$ajaxGet("/distributor/contract/findBindedList", param).then(data => {
        this.list.data2 = (data.records || []);
        this.list.status = "pass";
      })
      .catch((err) => {
        console.warn(err)
        this.list.status = "error";
      });
    },
    onSave() {
      this.$jsonPost('/distributor/contract/bind', this.selectedItems).then(res => {
        this.$Message.info('绑定成功')
        this.closeModal()
      }).catch(err => {
        this.closeModal()
      })
    },
    openModal(row) {
      this.modal = true;
      this.sourceBtypeName = ''
      this.row = row
      this.getData()
      this.getDataById(row.distributorId)
    },
    closeModal() {
      this.modal = false;
    },
    onSelectionChange(val) {
      this.selectedItems = val.map(item => {
        let obj = {
          distributorId: this.row.distributorId,
          distributorName: this.row.distributorName,
          ownerId: item.ownerId,
          sourceBtypeId: item.sourceBtypeId
        }
        return obj
      })
    }
  }
}
</script>

